<template>
  <div style="background-color: #F4F4F4;height: 1000px;">
    <!-- 头部 -->
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 商家接单 -->
    <div class="receiving-Text" style="text-align: center;">
      骑手订单信息
    </div>



    <!-- 商家信息 -->
    <van-cell-group inset style="margin-top: 10px; box-shadow: 1px 1px 10px 1px rgba(0.1, 0.1, 0.1, 0.1);">
      <van-collapse v-model="activeNames">
        <van-collapse-item :title="orderDetail.shopName" name="1" :border="false">
          <van-cell v-for="(detail, index) in JSON.parse(orderDetail.orderDetails) " :key="index">
            <van-card
              :num="detail.itemNum"
              :price="detail.itemPrice"
              desc="描述信息"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
            >
            <template #title>
              <span style="font-size: 16px;">{{ detail.itemName }}</span>
            </template>
          </van-card>
            
          </van-cell>
          <van-cell>
            <van-grid clickable :column-num="2" :border="false" icon-size="20">
              <van-grid-item :icon="require('../assets/img/联系商家.png')" text="商家电话" to="/" />
              <van-grid-item :icon="require('../assets/img/消息.png')" text="发送消息" to="/" />
            </van-grid>
          </van-cell>
        </van-collapse-item>
      </van-collapse>
    </van-cell-group>


    <!-- 地址信息 -->
    <van-cell-group inset style="margin-top: 10px; box-shadow: 1px 1px 10px 1px rgba(0.1, 0.1, 0.1, 0.1);">
      <van-collapse v-model="activeNamesOne">
        <van-collapse-item title="" name="1" :border="false">
          <van-cell>
            <van-col span="6">配送时间</van-col>
            <van-col span="9"></van-col>
            <van-col span="9" style="display: flex;justify-content: right;">
              <div>9月11日 17:10-18:00</div>
            </van-col>
          </van-cell>
          <van-cell>
            <van-col span="6">配送地址</van-col>
            <van-col span="9"></van-col>
            <van-col span="9" >
              <div style="display: flex;justify-content: right;">{{ address }}</div>
              <div style="display: flex;justify-content: right;">{{ orderDetail.username }}&nbsp;{{ orderDetail.userPhone }}</div>
            </van-col>
          </van-cell>
          <van-cell title="备注" :label="orderDetail.orderRemarks" />
          
        </van-collapse-item>
      </van-collapse>
    </van-cell-group>

  </div>
</template>

<script>
import AMapLoder from "@amap/amap-jsapi-loader"
import axios from 'axios';
// 设置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '076a11c5506a73967e139cab3f76629a',
}

export default {
  name: 'App',
  data(){
    return{
      //地址
      address:this.$route.query.order.district + this.$route.query.order.addressDetail,

      activeNames: ['1'],
      activeNamesOne:['1'],
      //订单
      orderDetail:this.$route.query.order,

      //订单详情
      // orderDetailsItem:JSON.stringify(this.$route.query.order.orderDetail),
      map:null,
      map2:null,
      riding:null,

      //骑手纬度
      riderLatitude:null,
      //骑手经度
      riderLongitud:null,

      //商家经纬度
      shopLatitude:null,
      shopLongitud:null,
    };
  },
  methods:{
    onClickLeft(){
        this.$router.push({
            name:"home"
        })
        // this.$router.back() //后退
    },
    //获取骑手当前定位
    getPosition(){
      let that = this;
      that.convertLatitudeAndLongitude()
      if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
          var latitude = position.coords.latitude;
          var longitude = position.coords.longitude;
          that.riderLatitude = latitude
          that.riderLongitud = longitude
          setTimeout(() => {
            that.initAMap()
          }, 500);
      });
      } else {
          console.log("Geolocation is not supported by this browser.");
      }
    },
    //初始化地图
    initAMap(){
      AMapLoder.load({
      "key": "f77c4299bdb279ff82f9e2b57a0563d3", 
      "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": ['AMap.Riding'],
    }).then(AMap => {
      this.map = new AMap.Map("container",{
        resizeEnable: true,
        center: [116.397428, 39.90923],//地图中心点
        zoom: 13 //地图显示的缩放级别
      });
      this.riding = new AMap.Riding({
        map: this.map,
        panel: "panel"
      });
      this.riding.search([this.riderLongitud,this.riderLatitude],[this.shopLatitude,this.shopLongitud], function(status, result) {
        // result即是对应的骑行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_RidingResult
        if (status === 'complete') {
            console.log("打印成功");
             // 获取起点和终点坐标
             const route = result.routes && result.routes[0];
             console.log(route);
        } else {
            console.log("异常信息 = "+result);
        }
    });
    }).catch(e => {
      console.log(e);
    })
    },

    //
    //计算时间和距离
    calculateDistance(origin, destination) {
      const distance = this.map.getDistance(origin, destination);
      this.distance = distance.toFixed(2); // 保留两位小数
    },

    //获取订单地址转换成经度纬度
    convertLatitudeAndLongitude(){
      if(this.orderDetail.orderStatus == 4){
        console.log(11);
          axios.get(`https://restapi.amap.com/v3/geocode/geo?address=
        ${this.$route.query.order.district + this.$route.query.order.addressDetail}
        &output=JSON&key=839bfb965ce089afc2306a5e7ee29000`).then(result => {
          // console.log("这是商家地址转换的对象 = ",result.data.geocodes[0].location);
          let all = result.data.geocodes[0].location.split(",")
          this.shopLatitude = Number(all[0])
          this.shopLongitud = Number(all[1])
        })
      }else{
        console.log(222);
        axios.get(`https://restapi.amap.com/v3/geocode/geo?address=
          ${this.orderDetail.shopAddress}
          &output=JSON&key=839bfb965ce089afc2306a5e7ee29000`).then(result => {
            // console.log("这是商家地址转换的对象 = ",result.data.geocodes[0].location);
            let all = result.data.geocodes[0].location.split(",")
            this.shopLatitude = Number(all[0])
            this.shopLongitud = Number(all[1])
          })
      }
     
    }
  },
  mounted() {
    console.log(this.$route.query.order);
    // this.convertLatitudeAndLongitude()
    this.getPosition()
    console.log(this.address);
  },
  // beforeRouteLeave(to, from, next){
  //   // 清除数据或一些其他操作
  //     // this.$destroy()
  //     // next()
  // }
}
</script>
  
<style scoped>
.collapset-title{
  font-size: 20px
}

#container {
    width: 100%;
    height: 350px;
    position: relative;
}
#panel {
    position: absolute;
    background-color: white;
    max-height: 150px;
    overflow-y: auto;
    top: 0px;
    right: 0px;
    width: 150px;
}
#panel .amap-lib-driving {
    border-radius: 4px;
    overflow: hidden;
}


*{
  margin: 0;
  padding: 0;
}
.receiving-Text{
  height: 60px;
  font-size: 20px; 
  font-weight: bold;
}
.van-nav-bar{
  background-color: #F4F4F4;
}
.van-card{
  background-color: white;
}
</style>
